
// @ts-ignore
import {Form, Input, Modal} from "antd";
import React from "react";
import IconUpload from "@/app/lib/IconUpload";
import TextArea from "antd/es/input/TextArea";

// @ts-ignore
export default function AddModal({open,onAddCancel,onAddOk}){
	const [form] = Form.useForm();
	const onIconChange = function (data:any){
		form.setFieldValue("icon",data.accessUrl)
	}
	return (
		<Modal title={"添加"} okText={"确定"} cancelText={"取消"} okButtonProps={{ autoFocus: true }} destroyOnClose={true}
					 open={open} onCancel={onAddCancel} onOk={async () => {
			const values = await form.validateFields();
			onAddOk(values)
		}
		}>
			<Form layout={"horizontal"} form={form}
						labelCol={{ span: 6 }}
						wrapperCol={{ span: 16 }} size={"small"}>
				<Form.Item
					name="appname"
					label="应用名"
					rules={[{ required: true, message: '应用名不能为空' }]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="appTitle"
					label="应用显示名"
					rules={[{ required: true, message: '显示名不能为空' }]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="sort"
					label="排序"
					rules={[{ required: true}]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="route"
					label="路由地址"
					rules={[{ required: false}]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="icon"
					label="图标"
					rules={[{ required: false}]}
				>
					<IconUpload onUploadSuccess={onIconChange}/>
				</Form.Item>
				<Form.Item
					name="description"
					label="描述"
					rules={[{ required: false}]}
				>
					<TextArea rows={3} />
				</Form.Item>
				<Form.Item
					name="attributes"
					label="扩展属性"
					rules={[{ required: false}]}
				>
					<TextArea rows={3} />
				</Form.Item>
			</Form>
		</Modal>
	);
}